<template>
  <div class="item-mall">
    <div class="item-mall-item">
      <div class="item-mall-item-title">1、保存视频到相册并复制链接</div>
      <div class="item-mall-item-cont">
        <div class="item-mall-item-cont-top">
          <div class="item-mall-img">
            <img :src="linkInfo.imgUrl" alt="">
          </div>
          <div class="item-mall-text" v-if="linkInfo.is_video">推荐您自己制作个性化视频提高视频号的内容质量</div>
          <div class="item-mall-text" v-else>该商品暂未提供相关视频展示，请去视频号制作视频</div>
        </div>
        <div class="item-mall-item-cont-opt">
          <div class="item-mall-link">{{linkInfo.extend_url}}</div>
          <div  v-if="linkInfo.is_video == 1" class="item-mall-btn" @click="copyItemLinkAndDown">下载视频并复制链接</div>
          <div v-else class="item-mall-btn" @click="copyItemLink">复制链接</div>
        </div>
      </div>
    </div>
    <div class="item-mall-item">
      <div class="item-mall-item-title">2、发布到视频号</div>
      <div class="item-mall-item-cont item-mall-pad">
        <div class="item-mall-item-cont-bz">
          <div class="item-mall-item-cont-bz-img mgr34"><img src="https://img.wifenxiao.com/h5-wfx/images/item/detail/shop_small_1.png" alt=""></div>
          <div class="item-mall-item-cont-bz-text">点击进入朋友圈下方的「视频号」</div>
        </div>
        <div class="item-mall-item-cont-bz">
          <div class="item-mall-item-cont-bz-text mgr34">进入视频号的个人中心点击「发表新动态」</div>
          <div class="item-mall-item-cont-bz-img"><img src="https://img.wifenxiao.com/h5-wfx/images/item/detail/shop_small_2.png" alt=""></div>
          
        </div>
        <div class="item-mall-item-cont-bz">
          <div class="item-mall-item-cont-bz-img mgr34"><img src="https://img.wifenxiao.com/h5-wfx/images/item/detail/shop_small_2.png" alt=""></div>
          <div class="item-mall-item-cont-bz-text">进入个人中心点击「发表新动态」选择下载好的视频</div>
        </div>
        <div class="item-mall-item-cont-bz">
          <div class="item-mall-item-cont-bz-text mgr34">轻触扩展链接下方的灰色 区域，即可将您的专属带 货链接插入视频</div>
          <div class="item-mall-item-cont-bz-img bigimg"><img src="https://img.wifenxiao.com/h5-wfx/images/item/detail/shop_small_3.png" alt=""></div>
        </div>
        <div class="item-mall-item-cont-bz">
          <div class="item-mall-item-cont-bz-text" style="width: 100%;">编辑好视频搭配的文案，将您的视频分享至朋友圈 或微信好友，让好友帮你点个赞吧！坐等公域流量 为您带来的订单收益哦~</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getVideoInfo, getVideoUrl } from '@/api/item/item'
import { saveFileList } from '@/smallApp/downFile'
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      linkInfo: {}
    }
  },
  mounted() {
    this.getVideoInfoFun()
  },
  methods: {
    // 复制链接
    copyItemLink() {
      wx.setClipboardData({
        data: this.linkInfo.extend_url,
        success: function() {}
      })
    },

    copyItemLinkAndDown() {
      wx.setClipboardData({
        data: this.linkInfo.extend_url,
        success: (res) => {
          this.getVideoUrlFun({item_id: this.$route.query.detailId, video_url: this.linkInfo.video_url})
        }
      })
      

      // let list = []
      // if (this.linkInfo.video_url) {
      //   list[0] = 'https://1000img01.oec365.com/upload/56/material/20200630104507101_0.mp4'
      //   saveFileList(list).then(res => {
      //     if (res) {
      //       // console.log(res)
      //     }
      //   })
      // }
    },

    getVideoUrlFun(sendData) {
      this.$loadingWrap.show()
      getVideoUrl(sendData).then(res => {
        if (res.status == 1) {
          // console.log(res)
          this.$loadingWrap.close()
          wx.downloadFile({
            url: res.data.path,
            success: (res) => {
              // console.log(res, '原生')
              wx.saveVideoToPhotosAlbum({
                filePath: res.tempFilePath,
                complete: (res) => {
                  // console.log(res)
                  let msg = ''
                  if (res.errMsg == 'saveVideoToPhotosAlbum:ok') {
                    msg = '视频保存成功'
                  } else if (res.errMsg == 'saveVideoToPhotosAlbum:fail cancel') {
                    msg = '取消保存'
                  } else {
                    msg = '保存失败' + res.errMsg
                  }
                  wx.showModal({
                    title: '提示',
                    content: msg,
                    showCancel: false,
                    success: (res) => {}
                  })
                  // console.log(res.errMsg, '保存结果')
                }
              })
            }
          })
        } else {
          this.$Error(res.msg)
        }
      })
    },

    getVideoInfoFun() {
      const $query = this.$route.query
      getVideoInfo({ item_id: $query.detailId, supplier: $query.supplier }).then(res => {
        if (res.status == 1) {
          this.linkInfo = res.data
        } else {
          this.$Error(res.msg)
        }
      })
    }
  }
})
</script>

<style lang="scss">
  .item-mall {
    background-color: #FBC97D;
    padding: 40px 32px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    &-item {
      padding-bottom: 50px;
      &:last-child {
        padding-bottom: 0;
      }
      .item-mall-pad {
        width: 100%;
        box-sizing: border-box;
        padding: 40px;
      }
      &-title {
        font-size: 40px;
        color: #fff;
        padding-bottom: 24px;
      }
      &-cont {
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        &-top {
          width: 100%;
          box-sizing: border-box;
          padding: 16px;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          .item-mall-img {
            width: 152px;
            height: 152px;
            border-radius: 6px;
            margin-right: 24px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .item-mall-text {
            width: calc(100% - 176px);
            font-size: 32px;
            font-weight: bold;
            line-height: 44px;
          }
        }
        &-opt {
          width: 100%;
          box-sizing: border-box;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          background-color: #F6F6F6;
          padding: 10px 16px;
          .item-mall-link {
            width: calc(100% - 272px);
            color: #25B656;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .item-mall-btn {
            width: 244px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            color: #fff;
            background-color: #25B656;
            font-size: 24px;
            margin-left: 28px;
            border-radius: 6px;
          }
        }
        &-bz {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          border-bottom: 1px solid #EDEDED;
          padding-bottom: 40px;
          padding-top: 40px;
          &:first-child {
            padding-top: 0;
          }
          &:last-child {
            padding-bottom: 0;
            border: none;
          }
          .mgr34 {
            margin-right: 34px;
          }
          .bigimg {
            height: 344px !important;
          }
          &-img {
            width: 272px;
            height: 178px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          &-text {
            width: calc(100% - 306px);
            font-size: 28px;
            font-weight: bold;
            line-height: 44px;
          }
        }
      }
    }
  }
</style>